<template>
    <uxt-time-picker
        :name="name"
        :start="start"
        :end="end"
        :disabled="disabled"
        v-model="value1"
        @change="handleChange"
        @cancel="handleCancel"
    >
        <uxt-bar
            :classes="classes"
            :styles="styles"
            :color="color"
            :bg-color="bgColor"
            :icon="icon"
            :title="title"
            :content="content2"
            :desc="desc"
            :arrow="arrow"
            :box="box"
            :round="round"
            :radius="radius"
            :focus="focus"
            @click="handleClick"
        >
            <template slot="left">
                <text class="text-red" v-if="star">*</text>
                <slot name="left"></slot>
            </template>
            <template slot="right">
                <slot name="right"></slot>
            </template>
        </uxt-bar>
    </uxt-time-picker>
</template>

<script>
import baseMixin from '../mixins/base.js'
import barMixin from '../mixins/bar.js'
import rrMixin from '../mixins/rr.js'
import uxtTimePicker from './uxt-time-picker.vue'
import uxtBar from './uxt-bar.vue'
import { deepCopy } from '../utils/util.js'

export default {
    name: 'uxt-time-picker-bar',
    mixins: [baseMixin, barMixin, rrMixin],
    components: {
        uxtTimePicker,
        uxtBar
    },
    props: {
        name: {
            type: String
        },
        value: {
            type: String,
            default: ''
        },
        start: {
            type: String,
            default: ''
        },
        end: {
            type: String,
            default: ''
        },
        // 红星
        star: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        bgColor: {
            default: 'white'
        },
        content: {
            default: '请选择'
        },
        arrow: {
            default: true
        }
    },
    data() {
        return {
            focus: false,
            value1: this.value
        }
    },
    computed: {
        content2() {
            // 单选
            if (this.value1 === '') {
                return this.content
            }
            return this.value1
        }
    },
    watch: {
        value(newVal, oldVal) {
            this.value1 = this.value
        }
    },
    methods: {
        handleChange(e) {
            this.$emit('change', e)
            this.$emit('input', e.detail.value)
            this.focus = false
        },
        handleCancel(e) {
            this.$emit('cancel', e)
            this.focus = false
        },
        handleClick(e) {
            if (this.disabled) {
                return
            }
            this.focus = true
            let v = this.value1
            this.value1 = '00:00'
            setTimeout(() => {
                this.value1 = v
            }, 0)
        }
    }
}
</script>
